<template>
  <div class="app-container">
    <el-button type="primary" plain @click="dialogCreateAssociationVisible = true">创建公会</el-button>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="110">

        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="公会名称" width="150">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="头像" width="200" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          />
        </template>
      </el-table-column>
      <el-table-column label="公会等级" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.level }}
        </template>
      </el-table-column>
      <el-table-column label="简介" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.intro }}
        </template>
      </el-table-column>
      <el-table-column label="公会长账号" width="150">
        <template slot-scope="scope">
          {{ scope.row.presidentAccount }}
        </template>
      </el-table-column>

      <el-table-column label="公会总流水" width="150">
        <template slot-scope="scope">
          {{ scope.row.totalNumber }}
        </template>
      </el-table-column>
      <el-table-column label="公会周流水" width="150">
        <template slot-scope="scope">
          {{ scope.row.totalNumber }}
        </template>
      </el-table-column>
      <el-table-column label="公会日流水" width="150">
        <template slot-scope="scope">
          {{ scope.row.todayEarnings }}
        </template>
      </el-table-column>
      <el-table-column label="公会昨日流水" width="150">
        <template slot-scope="scope">
          {{ scope.row.yesterdayEarnings }}
        </template>
      </el-table-column>
      <el-table-column label="公会分成" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.commissionRatio }}
        </template>
      </el-table-column>
      <el-table-column v-if="status==-1" label="失败原因" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.circle.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="入驻时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="110" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click=" handelRealDelete(scope.row.id)"></el-button>
          <el-button
            type="primary"
            size="small"
            @click="dialogFormVisible = true; associationId = scope.row.id; fetchUserData(); "
          >
            查看成员
          </el-button>

          <el-button
            type="primary"
            size="small"
            @click="dialogFormUpdateOwnerIdVisible = true; updateOwner.associationId = scope.row.id; "
          >
            修改会长id
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="size"
      :current-page="page"
      :total="total"
      @current-change="fetchData">
    </el-pagination>
    <el-dialog title="修改会长id" :visible.sync="dialogFormUpdateOwnerIdVisible">
      <el-form ref="form" :model="updateOwner" label-width="80px">
        <el-form-item label="会长id">
          <el-input v-model="updateOwner.ownerId" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormUpdateOwnerIdVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateOwner">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="成员列表" :visible.sync="dialogFormVisible" width="76%">
      <el-table
        v-loading="userListLoading"
        style="margin-top: 10px"
        :data="userList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="用户名" width="110">
          <template slot-scope="scope">
            {{ scope.row.user.account }}
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" width="150">
          <template slot-scope="scope">
            {{ scope.row.user.nickname }}
          </template>
        </el-table-column>

        <el-table-column label="用户头像" width="200" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.user.avatar"
              :preview-src-list="[scope.row.user.avatar]"
            />
          </template>
        </el-table-column>
        <el-table-column label="本周收益" width="50">
          <template slot-scope="scope">
            {{ scope.row.weekEarnings }}
          </template>
        </el-table-column>

        <el-table-column label="总收益" width="150">
          <template slot-scope="scope">
            {{ scope.row.totalEarnings }}
          </template>
        </el-table-column>

        <el-table-column label="是否是管理员" width="150">
          <template slot-scope="scope">
            {{ scope.row.isAdmin? '是':'否' }}
          </template>
        </el-table-column>

        <el-table-column label="加入时间" width="100">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="110" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" round @click="dialogFormUserLevelVisible = true; associationUser.userId=scope.row.userId">
              设置权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="设置权限" :visible.sync="dialogFormUserLevelVisible">
      <el-radio v-model="associationUser.role" label="1">管理员</el-radio>
      <el-radio v-model="associationUser.role" label="2">普通成员</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormUserLevelVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSetRole">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="公会信息" :visible.sync="dialogCreateAssociationVisible" width="76%">
      <el-form ref="form" :model="associationDTO" label-width="80px">
        <el-form-item label="公会名称">
          <el-input v-model="associationDTO.name" />
        </el-form-item>
        <el-form-item label="会长账号">
          <el-input v-model="associationDTO.presidentAccount" />
        </el-form-item>
        <el-form-item label="公会头像">
          <el-upload
            action="https://admin-api.pengxinmeta.com/admin-api/file/upload"
            list-type="picture-card"
            :limit="1"

            :on-success="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="公会简介">
          <el-input v-model="associationDTO.intro" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateAssociationVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateAssociation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, createAssociation,deleteById,updateOwner } from '@/api/association'
import { getSigningListByAssociationId, setRole } from '@/api/party'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      updateOwner: {},
      userListLoading: false,
      userList: null,
      dialogFormVisible: false,
      associationUser: {},
      associationDTO: {
        avatar: '',
        presidentAccount: '',
        name: '',
        intro: '',
        commissionRatio: 0.15
      },
      associationId: null,
      dialogFormUpdateOwnerIdVisible: false,
      dialogFormUserLevelVisible: false,
      dialogCreateAssociationVisible: false,
      list: null,
      listLoading: true,
      topicListLoading: true,
      status: '-10',
      page: 1,
      size: 100,
      userPage: 1,
      userSize: 100,
      userTotal: 0,
      total: 0
    }
  },
  created() {
    this.fetchData(this.page)
  },
  methods: {
    handleClick(tab, event) {
      this.fetchData(this.page)
    },
    fetchData() {
      this.listLoading = true
      getList({ page: this.page, size: this.size }).then(response => {
        this.total = response.total
        this.list = response.data
        this.listLoading = false
      })
    },
    handleSetRole() {
      setRole(this.associationUser).then(res => {
        this.fetchUserData(this.userPage)
        this.dialogFormUserLevelVisible = false
      })
    },
    fetchUserData() {
      this.userListLoading = true
      getSigningListByAssociationId({ status: 1, page: this.userPage, size: this.userSize, associationId: this.associationId }).then(response => {
        this.userTotal = response.total
        console.log(this.page)
        this.userList = response.data
        this.userListLoading = false
      })
    },
    handleUpdateOwner() {
      this.fetchData()
      this.dialogFormUpdateOwnerIdVisible = false
      updateOwner(this.updateOwner).then(res=> {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    handleRemove(file) {
      this.associationDTO.avatar = ''
      console.log(file)
    },
    handlePictureCardPreview(response, file) {
      this.associationDTO.avatar = response.data.url
    },
    handleCreateAssociation() {
      this.dialogCreateAssociationVisible = false
      createAssociation(this.associationDTO).then(res => {
        this.fetchData(this.page)
        this.$message({
          type: 'success',
          message: '创建成功!'
        })
      })
    },
    handelDelete(id) {
      this.$confirm('此操作将删除该动态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // deleteById(id).then(() => {
        //   this.fetchData(this.page)
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        // }).catch(() => {
        //   this.$message({
        //     type: 'error',
        //     message: '删除失败'
        //   })
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handelRealDelete(id) {
      this.$confirm('此操作将彻底删除该公会,请谨慎操作！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(() => {
          this.fetchData(this.page)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
